<template>
    <div>
        <el-card>
            <div style="display: flex">
                <div style="width: 30%;margin-right: 1rem;">
                    <div style="text-align: left">
                        <h4 class="textAlign">分部工程名称</h4>
                        <el-button type="text" @click="handleAdd">新建</el-button>
                        <el-button type="text" @click="editData">编辑</el-button>
                        <el-button type="text" @click="deleteData">删除</el-button>
                        <!-- <el-button type="text">调用</el-button> -->
                    </div>
                    <!-- <tree :dataList="dataList" @checkNode="handleCheckNode"></tree> -->
                    <el-table
                        :data="dataList"
                        border
                        ref="singleTableRef"
                        highlight-current-row
                        style="width: 100%"
                        @current-change="handleCheckNode"
                    >
                        <el-table-column label="编号" type="index" width="100"></el-table-column>
                        <el-table-column label="分部工程名称" prop="name_"></el-table-column>
                    </el-table>
                </div>
                <div style="width: 65%;text-align: left">
                    <h4 class="textAlign">分项工程名称</h4>
                    <el-button type="text" @click="handleAddShare">新建</el-button>
                    <el-table :data="tableData" border>
                        <el-table-column label="编号" type="index" width="100"></el-table-column>
                        <el-table-column label="分项工程名称" prop="fxgcmc"></el-table-column>
                        <el-table-column label="其它" prop="other_"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button
                                    type="text"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="text-align: right; margin-top: 1rem">
                        <el-pagination
                            background
                            small
                            layout="total, sizes, prev, pager, next"
                            @size-change="pageSizeChange"
                            @current-change="pageChange"
                            :current-page.sync="page"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size.sync="pagesize"
                            :total="total"
                        ></el-pagination>
                    </div>
                </div>
            </div>
            <!-- 新增分部工程 -->
            <el-dialog v-model="dialogFormVisible" title="新增分部工程">
                <el-form :model="form" :rules="ruleForm" ref="addDistribution">
                    <el-form-item label="分部工程名称" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="handleCancel">取消</el-button>
                        <el-button type="primary" @click="handleCommit('addDistribution')">确定</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 新增分项工程 -->
            <el-dialog v-model="dialogFormVisibleShare" title="新增分项工程">
                <el-form :model="formShare" :rules="ruleFormShare" ref="addShare">
                    <el-form-item label="分项工程名称" prop="name" :label-width="formLabelWidth">
                        <el-input v-model="formShare.name"></el-input>
                    </el-form-item>
                    <el-form-item label="其他" :label-width="formLabelWidth">
                        <el-input v-model="formShare.other"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="handleShareCancel">取消</el-button>
                        <el-button type="primary" @click="handleCommit('addShare')">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import Tree from '../../components/Tree.vue'
export default {
    components: {
        Tree
    },
    data() {
        return {
            page: 1,
            pagesize: 10,
            total: 0,
            dataList: [],
            tableData: [],
            form: {
                id: '',
                name: '',
            },
            ruleForm: {
                name: [{
                    required: true,
                    message: '请输入分部工程名称', trigger: 'blur'
                }],
            },

            formShare: {
                id: '',
                name: '',
                other: ''
            },
            ruleFormShare: {
                name: [{
                    required: true,
                    message: '请输入分部工程名称', trigger: 'blur'
                }],
            },
            checkNodeId: '',
            checkNodeChild: [],
            dialogFormVisible: false,
            formLabelWidth: '150px',
            dialogFormVisibleShare: false,
        }
    },
    created() {
        this.getData()
    },
    methods: {
        // 查询分部
        getData() {
            this.$axios.post(`/form/formDefData/getList_ppcgDistribution?order=asc&offset=0&limit=10000`).then(res => {
                if (res.isOk) {
                    this.$ElMessage({
                        message: '查询成功',
                        type: 'success',
                    })
                    this.dataList = res.rows
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 查询分项
        getDataShare() {
            const param = { curPage: this.page, pageSize: this.pagesize, params: { queryData: [{ name: "master_id_", con: "like", val: this.checkNodeId }] } }
            this.$axios.post(`/form/formCustSql/view/list_ppcgShare`, param).then(res => {
                if (res.isOk) {
                    this.tableData = res.data.list
                    this.total = res.data.count
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 页码变更
        pageChange(val) {
            this.page = val;
            this.getDataShare();
        },
        // 条目变更
        pageSizeChange(val) {
            this.pagesize = val;
            this.getDataShare();
        },
        // 新增分部
        handleAdd() {
            this.dialogFormVisible = true
        },
        // 编辑分部
        editData() {
            if (!this.checkNodeId) {
                this.$ElMessage({
                    message: '请选择要编辑的分部名称',
                    type: 'warning',
                })
                return
            }
            this.dialogFormVisible = true
            this.getDataDtl()
        },
        // 查询分部详情
        getDataDtl() {
            this.$axios.post(`/form/formDefData/getData?key=ppcgDistribution&id=${this.checkNodeId}&sql=`).then(res => {
                if (res.isOk) {
                    const data = res.data.data.ppcgDistribution
                    this.form.id = data.id
                    this.form.name = data.name
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 删除分部
        deleteData() {
            if (!this.checkNodeId) {
                this.$ElMessage({
                    message: '请选择要删除的分部名称',
                    type: 'warning',
                })
                return
            }
            this.$ElMessageBox.confirm(
                '确定删除该条数据吗？',
                '警告',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.$axios.post(`/form/formDefData/removeData/ppcgDistribution/${this.checkNodeId}`).then(res => {
                        if (res.isOk) {
                            this.$ElMessage({
                                message: '删除成功',
                                type: 'success',
                            })
                            this.getData()
                        } else {
                            this.$ElMessage({
                                message: res.msg,
                                type: 'error',
                            })
                        }
                    })
                }).catch(() => {
                })
        },
        // 编辑分项
        handleEdit(index, row) {
            this.dialogFormVisibleShare = true
            this.getShareDtl(row.id_)
        },
        setCurrent(row) {
            row = ''
            this.checkNodeId = ''
            this.$refs.singleTableRef.setCurrentRow(row)
        },
        // 查询分项详情
        getShareDtl(id) {
            this.$axios.post(`/form/formDefData/getData?key=ppcgShare&id=${id}&sql=`).then(res => {
                if (res.isOk) {
                    const data = res.data.data.ppcgShare
                    this.formShare.id = data.id
                    this.formShare.name = data.name
                    this.formShare.other = data.other
                    this.getDataShare()
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 删除分项
        handleDelete(index, row) {
            this.$ElMessageBox.confirm(
                '确定删除该条数据吗？',
                '警告',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    this.$axios.post(`/form/formDefData/removeData/ppcgShare/${row.id_}`).then(res => {
                        if (res.isOk) {
                            this.$ElMessage({
                                message: '删除成功',
                                type: 'success',
                            })
                            this.getDataShare()
                        } else {
                            this.$ElMessage({
                                message: res.msg,
                                type: 'error',
                            })
                        }
                    })
                })
                .catch(() => {
                })

        },
        // 新增分项
        handleAddShare() {
            if (!this.checkNodeId) {
                this.$ElMessage({
                    message: '请选择要新增分项的分部名称',
                    type: 'warning',
                })
                return
            }
            this.dialogFormVisibleShare = true
        },
        // 选中分部节点
        handleCheckNode(node) {
            if (node) {
                this.checkNodeId = node?.id_
                this.getDataShare()
            }
        },
        // 保存分部&分项
        handleCommit(formName) {
            const that = this
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    if (formName === 'addDistribution') {
                        // 验证要保存的分部名称是否存在
                        let isExist = false
                        for (let d of this.dataList) {
                            if (d.name_ === that.form.name) {
                                isExist = true
                                break
                            }
                        }
                        if (isExist) {
                            isExist
                            this.$ElMessage({
                                message: `分部${that.form.name}已存在`,
                                type: 'error'
                            })
                        } else {
                            that.dialogFormVisible = false
                            that.addNode()
                        }
                    }
                    else {
                        // 验证要保存的分项名称是否存在
                        let isExist = false
                        for (let d of that.tableData) {
                            if (d.fxgcmc === that.formShare.name) {
                                isExist = true
                                break
                            }
                        }
                        if (isExist) {
                            this.$ElMessage({
                                message: `分项${that.formShare.name}已存在`,
                                type: 'error'
                            })
                        } else {
                            that.dialogFormVisibleShare = false
                            that.addNodeShare()
                        }
                    }
                }
            })
        },
        // 保存&更新分部接口
        addNode() {
            let code = this.dataList.length + 1
            const param = { ppcgDistribution: { id: this.form.id, code: code, name: this.form.name } }
            this.$axios.post(`/form/formDefData/saveData?key=ppcgDistribution&sql=`, param).then(res => {
                if (res.isOk) {
                    this.form.name = ''
                    this.form.id = ''
                    this.checkNodeId = ''
                    this.setCurrent()
                    this.tableData = []
                    this.$ElMessage({
                        message: '保存成功',
                        type: 'success',
                    })
                    this.getData()
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 保存&更新分项接口 
        addNodeShare() {
            const param = { ppcgShare: { id: this.formShare.id, masterId: this.checkNodeId, name: this.formShare.name, other: this.formShare.other } }
            this.$axios.post(`/form/formDefData/saveData?key=ppcgShare&sql=`, param).then(res => {
                if (res.isOk) {
                    this.formShare.name = ''
                    this.formShare.other = ''
                    // this.checkNodeId = ''
                    this.formShare.id = ''
                    this.$ElMessage({
                        message: '保存成功',
                        type: 'success',
                    })
                    this.getDataShare()
                } else {
                    this.$ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        },
        // 取消编辑分部
        handleCancel() {
            this.dialogFormVisible = false
            this.checkNodeId = ''
        },
        // 取消编辑分项
        handleShareCancel() {
            this.formShare.id = ''
            this.formShare.name = ''
            this.formShare.other = ''
            this.dialogFormVisibleShare = false
        }
    }
}
</script>